<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一,IOS上的兼容问题
      // 1、表单元素 input 和textarea 默认有内阴影(css解决)
      // 解决方法: css样式设置
      // input, textarea {
      //     -webkit-apprance: none;
      // }

      // 2、input 调用键盘屏幕上移后，失去焦点不自动缩回去(这里我们用js来解决)
      // let keyboardRetraction;
      // if (isIOS()) {
      //     document.body.addEventListener('focusin', () => { // 软键盘弹起事件
      //         clearTimeout(keyboardRetraction);
      //     })
      //     document.body.addEventListener('focusout', () => { // 软键盘关闭事件
      //         clearTimeout(keyboardRetraction);
      //         keyboardRetraction = setTimeout(function() {
      //             // 当键盘收起的时候让页面回到原始位置
      //             window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
      //         }, 200)
      //    })
      // }
      // // 判断当前设备系统是否为IOS系统
      // function isIOS() {
      //     var UA = navigator.userAgent;
      //     if (UA.match(/iPad/) || UA.match(/iPhone/) || UA.match(/iPod/)) {
      //         return true;
      //     }else{
      //         return false;
      //     }
      // }

      console.log(
        '-----------------------------------------------------------------------------------------'
      )
      // 二,Android上兼容问题
      // 1、上下滑动滚动条时卡顿、慢（这个滑动不流畅一般出现在局部的滚动，建议都写成 全局滚动）
      // 解决方法：设置全局css的body样式
      // body {
      //     -webkit-overflow-scrolling: touch;
      //     overflow-scrolling: touch;
      // }
      // 2、某些Android手机圆角失效的bug
      // 解决方法：对设置了圆角的元素进行css样式设置
      // background-clip: padding-box;

      console.log(
        '-----------------------------------------------------------------------------------------'
      )
      // 三,ios和Android上共同出现的兼容问题
      // 1、长时间按住页面出现闪退i
      // 解决方法: css样式设置
      // body {
      //     -webkit-touch-callout: none;
      // }

      // 2、触摸元素时出现半透明灰色遮罩
      // 解决方法: 针对被触摸的元素进行css样式设置，
      // 比如该元素是a,实际情况可能是这样的:
      // <a class="getCode" href="javascript:void(0)">获取验证码</a>
      // .getCode {
      //     -webkit-tap-highlight-color: rgba(255,255,255,0);
      // }
      // 3、旋转屏幕时，字体大小调整的问题
      // 解决方法: css样式设置
      // html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
      //     -webkit-text-size-adjust: 100%;
      // }
    </script>
  </body>
</html>
